﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户个人中心</title>

<link rel="shortcut icon" href="img/favicon.ico">
<!--STYLESHEET-->
<!--=================================================-->
<!--Roboto Slab Font [ OPTIONAL ] -->
<link
	href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700"
	rel="stylesheet">
<link
	href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400"
	rel="stylesheet">
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Jasmine Stylesheet [ REQUIRED ]-->
<link href="css/style.css" rel="stylesheet">
<!--Font Awesome [ OPTIONAL ]-->
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<!--Switchery [ OPTIONAL ]-->
<link href="plugins/switchery/switchery.min.css" rel="stylesheet">
<!--Bootstrap Select [ OPTIONAL ]-->
<link href="plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet">
<!--ricksaw.js [ OPTIONAL ]-->
<link href="plugins/jquery-ricksaw-chart/css/rickshaw.css"
	rel="stylesheet">
<!--Bootstrap Validator [ OPTIONAL ]-->
<link href="plugins/bootstrap-validator/bootstrapValidator.min.css"
	rel="stylesheet">
<!--Demo [ DEMONSTRATION ]-->
<link href="css/demo/jquery-steps.min.css" rel="stylesheet">
<!--Summernote [ OPTIONAL ]-->
<link href="plugins/summernote/summernote.min.css" rel="stylesheet">
<!--Demo [ DEMONSTRATION ]-->
<link href="css/demo/jasmine.css" rel="stylesheet">
<!--SCRIPT-->
<!--=================================================-->
<!--Page Load Progress Bar [ OPTIONAL ]-->
<link href="plugins/pace/pace.min.css" rel="stylesheet">
<script src="plugins/pace/pace.min.js"></script>
</head>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>

	<div id="container"
		class="effect mainnav-sm navbar-fixed mainnav-fixed">
		<!--NAVBAR-->
		<!--===================================================-->
		<header id="navbar">
			<div id="navbar-container" class="boxed">
				<!--Navbar Dropdown-->
				<!--================================-->
				<div class="navbar-content clearfix">
					<ul class="nav navbar-top-links pull-left">
						<!--Navigation toogle button-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="tgl-menu-btn"><a class="mainnav-toggle" href="#">
								<i class="fa fa-navicon fa-lg"></i>
						</a></li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End Navigation toogle button-->
						<!--Messages Dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="dropdown"><a href="#" data-toggle="dropdown"
							class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i>

						</a> <!--Message dropdown menu-->
							<div class="dropdown-menu dropdown-menu-md with-arrow">
								<div class="pad-all bord-btm">
									<div class="h4 text-muted text-thin mar-no">You have 3
										messages.</div>
								</div>
								<div class="nano scrollable">
									<div class="nano-content">
										<ul class="head-list">
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av2.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Andy sent you a message</div>
														<small class="text-muted">15 minutes ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av4.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Lucy sent you a message</div>
														<small class="text-muted">30 minutes ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av3.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Jackson sent you a message</div>
														<small class="text-muted">40 minutes ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av6.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Donna sent you a message</div>
														<small class="text-muted">5 hours ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av4.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Lucy sent you a message</div>
														<small class="text-muted">Yesterday</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<img src="img/av3.png" alt="Profile Picture"
															class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Jackson sent you a message</div>
														<small class="text-muted">Yesterday</small>
													</div>
											</a></li>
										</ul>
									</div>
								</div>
								<!--Dropdown footer-->
								<div class="pad-all bord-top">
									<a href="#" class="btn-link text-dark box-block"> <i
										class="fa fa-angle-right fa-lg pull-right"></i>Show All
										Messages
									</a>
								</div>
							</div></li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End message dropdown-->
						<!--Notification dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="dropdown"><a href="#" data-toggle="dropdown"
							class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span
								class="badge badge-header badge-danger">5</span>
						</a> <!--Notification dropdown menu-->
							<div class="dropdown-menu dropdown-menu-md with-arrow">
								<div class="pad-all bord-btm">
									<div class="h4 text-muted text-thin mar-no">Notification
									</div>
								</div>
								<div class="nano scrollable">
									<div class="nano-content">
										<ul class="head-list">
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-primary"> <i
															class="fa fa-comment fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">New comments waiting
															approval</div>
														<small class="text-muted">15 minutes ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media"> <span
													class="badge badge-success pull-right">90%</span>
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-danger"> <i
															class="fa fa-hdd-o fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">HDD is full</div>
														<small class="text-muted">50 minutes ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-info"> <i
															class="fa fa-file-word-o fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Write a news article</div>
														<small class="text-muted">Last Update 8 hours ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media"> <span
													class="label label-danger pull-right">New</span>
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-purple"> <i
															class="fa fa-comment fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Comment Sorting</div>
														<small class="text-muted">Last Update 8 hours ago</small>
													</div>
											</a></li>
											<!-- Dropdown list-->
											<li><a href="#" class="media">
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-success"> <i
															class="fa fa-user fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">New User Registered</div>
														<small class="text-muted">4 minutes ago</small>
													</div>
											</a></li>
										</ul>
									</div>
								</div>
								<!--Dropdown footer-->
								<div class="pad-all bord-top">
									<a href="#" class="btn-link text-dark box-block"> <i
										class="fa fa-angle-right fa-lg pull-right"></i>Show All
										Notifications
									</a>
								</div>
							</div></li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End notifications dropdown-->
					</ul>
					<ul class="nav navbar-top-links pull-right">
						<!--Profile toogle button-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="hidden-xs" id="toggleFullscreen"><a
							class="fa fa-expand" data-toggle="fullscreen" href="#"
							role="button"> <span class="sr-only">Toggle fullscreen</span>
						</a></li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End Profile toogle button-->
						<!--User dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li id="dropdown-user" class="dropdown"><a href="#"
							data-toggle="dropdown" class="dropdown-toggle text-right"> <span
								class="pull-right"> <img
									class="img-circle img-user media-object"
									src="../FileDownloadServlet?fileName=${sessionScope.user.userPicturePath}"
									alt="Profile Picture">
							</span>
								<div class="username hidden-xs">${sessionScope.user.userName}</div>
						</a>
							<div class="dropdown-menu dropdown-menu-right with-arrow">
								<!-- User dropdown menu -->
								<ul class="head-list">
									<li"><a href="../user?op=logout"> <i
											class="fa fa-sign-out fa-fw"></i> Logout
									</a></li>
								</ul>
							</div></li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End user dropdown-->
					</ul>
				</div>
				<!--================================-->
				<!--End Navbar Dropdown-->
			</div>
		</header>
		<!--===================================================-->
		<!--END NAVBAR-->

		<!--Page content-->
		<!--===================================================-->
		<div id="page-content" style="margin-top: 60px; margin-left: 100px">

			<div>
				<h3 class="panel-title">用户个人信息</h3>
				<form id="fomr1" action="" method="post"
					enctype="muilmultipart/form-data">
					<span>头像：</span><img id="preview-img"
						src="../FileDownloadServlet?fileName=${sessionScope.user.userPicturePath}"
						style="width: 50px; height: 50px;"><br> <input
						type="file" id="picture" name="file" value="" placeholder="未选择头像"
						accept=”image/jpg，image/jpeg,image/png, image/gif”><br>
					<span>用 户 id：</span><input type="text" id="number" name="number"
						value="" readonly="readonly"><span id="tel"></span><br>
					<br> <span>用户名字：</span><input type="text" id="name"
						name="name" value=""><br> <br> <span>用户性别：</span><input
						type="text" id="sex" name="sex" value=""><br> <br>
					<span>真实姓名：</span><input type="text" id="realname" name="realname"
						value=""><br> <br> <span>用户年龄：</span><input
						type="text" id="age" name="age" value=""><br> <br>
					<span>身份证号：</span><input type="text" id="ident" name="ident"
						value=""><br> <br> <span>手 机 号：</span><input
						type="text" id="userTel" name="userTel" value=""><br>
					<br> <input type="button" id="btn-info" value="修改"><br>
					<input type="hidden" name="op" value="updataUserInfo"> <br>
				</form>
			</div>
			<br> <br> <br> <br>
			<hr style="border: 1px solid black">

			<div class="panel-heading">
				<h3 class="panel-title">用户预约记录</h3>
			</div>
			<div class="panel-body">
				<div id="demo-dt-selection_wrapper"
					class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					<div class="row">
						<div class="col-sm-12">
							<table id="demo-dt-selection"
								class="table table-striped table-bordered dataTable no-footer dtr-inline"
								role="grid" aria-describedby="demo-dt-selection_info">
								<thead>
									<tr role="row">
										<th class="sorting_asc" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Name: activate to sort column descending"
											style="width: 106px;" aria-sort="ascending">用户名</th>
										<th class="sorting_asc" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Name: activate to sort column descending"
											style="width: 106px;" aria-sort="ascending">真实姓名</th>
										<th class="min-tablet sorting" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Office: activate to sort column ascending"
											style="width: 124px;">预约时间</th>
										<th class="min-tablet sorting" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Extn.: activate to sort column ascending"
											style="width: 80px;">医生姓名</th>
										<th class="min-desktop sorting" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Start date: activate to sort column ascending"
											style="width: 100px;">所属科室</th>
										<th class="min-desktop sorting" tabindex="0"
											aria-controls="demo-dt-selection" rowspan="1" colspan="1"
											aria-label="Salary: activate to sort column ascending"
											style="width: 132px;">所属医院</th>
									</tr>
								</thead>
								<tbody id="inquiryinfo">

								</tbody>
							</table>
						</div>
					</div>

				</div>

				<!--===================================================-->
				<!--End page content-->
			</div>
			<!--===================================================-->
			<!--END CONTENT CONTAINER-->
			<!--MAIN NAVIGATION-->
			<!--===================================================-->
			<nav id="mainnav-container">
				<!--Brand logo & name-->
				<!--================================-->
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"> <i
						class="fa fa-forumbee brand-icon"></i>
						<div class="brand-title">
							<span class="brand-text">智慧医疗</span>
						</div>
					</a>
				</div>
				<!--================================-->
				<!--End brand logo & name-->
				<div id="mainnav">
					<!--Menu-->
					<!--================================-->
					<div id="mainnav-menu-wrap">
						<div class="nano">
							<div class="nano-content">
								<ul id="mainnav-menu" class="list-group">
									<!--Category name-->
									<!--Menu list item-->
									<li><a href="../front/index.html"><i
											class="fa fa-home"></i> <span class="menu-title">网站首页</span>
									</a></li>
									<li><a href="userBackindex.jsp"> <i class="fa fa-th"></i>
											<span class="menu-title">个人中心</span> <i class="arrow"></i>
									</a> <!--Submenu--></li>
							</div>
						</div>
					</div>
					<!--================================-->
					<!--End menu-->
				</div>
			</nav>
			<!--===================================================-->
			<!--END MAIN NAVIGATION-->
		</div>


	</div>
	<!--===================================================-->
	<!-- END OF CONTAINER -->
	<!--JAVASCRIPT-->
	<!--=================================================-->
	<!--jQuery [ REQUIRED ]-->
	<script src="js/jquery-2.1.1.min.js"></script>
	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="js/bootstrap.min.js"></script>
	<!--Fast Click [ OPTIONAL ]-->
	<script src="plugins/fast-click/fastclick.min.js"></script>
	<!--Jquery Nano Scroller js [ REQUIRED ]-->
	<script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
	<!--Metismenu js [ REQUIRED ]-->
	<script src="plugins/metismenu/metismenu.min.js"></script>
	<!--Jasmine Admin [ RECOMMENDED ]-->
	<script src="js/scripts.js"></script>
	<!--Switchery [ OPTIONAL ]-->
	<script src="plugins/switchery/switchery.min.js"></script>
	<!--Jquery Steps [ OPTIONAL ]-->
	<script src="plugins/parsley/parsley.min.js"></script>
	<!--Jquery Steps [ OPTIONAL ]-->
	<script src="plugins/jquery-steps/jquery-steps.min.js"></script>
	<!--Bootstrap Select [ OPTIONAL ]-->
	<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!--Bootstrap Wizard [ OPTIONAL ]-->
	<script src="plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
	<!--Masked Input [ OPTIONAL ]-->
	<script src="plugins/masked-input/bootstrap-inputmask.min.js"></script>
	<!--Bootstrap Validator [ OPTIONAL ]-->
	<script src="plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
	<!--Flot Chart [ OPTIONAL ]-->

	<!--Summernote [ OPTIONAL ]-->
	<script src="plugins/summernote/summernote.min.js"></script>
	<!--Fullscreen jQuery [ OPTIONAL ]-->
	<script src="plugins/screenfull/screenfull.js"></script>
	<!--Form Wizard [ SAMPLE ]-->
	<script src="js/demo/wizard.js"></script>
	<!--Form Wizard [ SAMPLE ]-->
	<script src="js/demo/form-wizard.js"></script>

</body>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script>
	number = "${sessionScope.user.userId}";
	userName = "${sessionScope.user.userName}";
	userAge = "${sessionScope.user.userAge}";
	userSex = "${sessionScope.user.userSex}";
	userRealName = "${sessionScope.user.userRealName}";
	userIdentifyId = "${sessionScope.user.userIdentifyId}";
	userTel = "${sessionScope.user.userTel}";
	userPicturePath = "${sessionScope.user.userPicturePath}";
	$(function() {
		//页面加载   查询当前用户信息
		searcUserinfo();
		//页面加载   查询当前用户问诊记录信息
		findInquiry()

		//旧密码框失去焦点事件
		$("#oldpassword").blur(function() {
			if ($(this).val() == "") {
				$("#pwd").text("密码不能为空");
				$("#pwd").css("color", "red");
				$("#btn-pwd").prop("disabled", true);
			} else {
				//判断旧密码是否正确
				$.ajax({
					url : "../user",
					dateType : "json",
					type : "post",
					data : {
						op : "panduan",
						number : number
					},
					success : function(resulet) {
						var pwd = "${sessionScope.user.userPassword}";
						var v2 = md5($("#oldpassword").val())
						console.log(pwd);
						console.log(v2);
						if (pwd == v2) {
							$("#pwd").text("正确");
							$("#pwd").css("color", "green");
							$("#btn-pwd").prop("disabled", false);
						} else {
							$("#pwd").text("密码不正确！");
							$("#pwd").css("color", "red");
							$("#btn-pwd").prop("disabled", true);
						}
					},
					error : function(error) {
						alert("异步请求失败!");
					}
				});

			}
		});
		// 头像选择做改变事件
		$("#picture")
				.change(
						function() {
							// 生成图片预览功能
							// 1.得到文件列表数组,获取数组中第一个文件
							var imgFile = this.files[0];

							// 判断是否有上传文件
							if (imgFile == null) {
								$("#preview-img").prop("src", "#");
							} else {
								// 正则表达式验证选择的是否是图片类型
								var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
								if (!regexImageFilter.test(imgFile.type)) {
									alert("请选择有效图片");
									$("#picture").val("");
								} else {
									// 2.构建文件读取流对象
									var fileReader = new FileReader();
									// 3.利用流对象获取文件内容
									fileReader.readAsDataURL(imgFile);
									// 4.加载事件
									fileReader.onload = function() {
										// 5.渲染头像预览框
										$("#preview-img").prop("src",
												this.result); // this.result从文件读取流对象中获取数据
									}
								}
							}

						})
		//新密码框失去焦点事件
		$("#newpassword").blur(function() {
			if ($(this).val() == "") {
				$("#newpwd").text("新密码不能为空！");
				$("#newpwd").css("color", "red");
				$("#btn-pwd").prop("disabled", true);
			} else {
				$("#newpwd").text("正确");
				$("#newpwd").css("color", "green");
				$("#btn-pwd").prop("disabled", false);
			}
		});
		//确认新密框失去焦点事件
		$("#confirmnewpassword").blur(function() {
			var pwd = $("#newpassword").val()
			if ($(this).val() != pwd) {
				$("#confirmpwd").text("两次密码不一致！");
				$("#confirmpwd").css("color", "red");
				$("#btn-pwd").prop("disabled", true);
			} else {
				if ($(this).val() != "") {
					$("#confirmpwd").text("正确");
					$("#confirmpwd").css("color", "green");
					$("#btn-pwd").prop("disabled", false);
				} else {
					$("#confirmpwd").text("两次密码不一致！");
					$("#confirmpwd").css("color", "red");
					$("#btn-pwd").prop("disabled", true);
				}
			}
		});

		//修改用户个人信息按钮点击事件
		$("#btn-info").click(function() {
			var formdata = new FormData($("#fomr1")[0]);
			$.ajax({
				url : "../user",
				dateType : "json",
				type : "post",
				processData : false,
				contentType : false,
				data : formdata,
				success : function(resulet) {
					alert("修改成功，请重新登入！")
					location.href = "../userRegisterAndLogin/pages/userLogin.jsp?msg=error";
				},
				error : function(error) {
					alert("异步请求失败!");
				}
			});
		});
	});
	//查询用户信息
	function searcUserinfo() {
		$.ajax({
			url : "../user",
			dateType : "json",
			type : "post",
			data : {
				op : "findUserInfo",
				number : number
			},
			success : function(resulet) {
				$("#number").val(number);
				$("#name").val(userName);
				$("#age").val(userAge);
				if (userSex != "") {
					if (userSex == 0) {
						$("#sex").val("女");
					} else {
						$("#sex").val("男");
					}
				}

				$("#realname").val(userRealName);
				$("#ident").val(userIdentifyId);
				$("#userTel").val(userTel);

			},
			error : function(error) {
				alert("异步请求失败!");
			}
		});
	}
	//查询预约记录
	function findInquiry() {
		$.ajax({
			url : "../user",
			dateType : "json",
			type : "post",
			data : {
				op : "findUserAppiontmentInfo",
				number : number
			},
			success : function(resulet) {
				console.log(resulet);
				var inquiry = ""
				$.each(resulet, function(index, itmes) {
					inquiry += "<tr role=\"row\" class=\"odd\"><td>"
							+ itmes.user.userName + "</td>" + "<td>"
							+ userRealName + "</td>" + "<td>"
							+ itmes.appointmentTime.substring(0, 19) + "</td>"
							+ "<td>" + itmes.doctor.doctorName + "</td>"
							+ "<td>" + itmes.doctor.department.departmentName
							+ "</td>" + "<td>"
							+ itmes.doctor.department.hospital.hospitalName
							+ "</td></tr>"
				});

				$("#inquiryinfo").html(inquiry);
			},
			error : function(error) {
				alert("异步请求失败!");
			}
		});

	}

	// 服务器提示上传文件类型不匹配
	var uploaderror = "${param.fileuploaderror}";
	if (uploaderror != "") {

		alert("请选择有效图片");
		location.href = "${pageContext.request.contextPath}/back/superinsertdoctor.jsp";
	}
	//注销
</script>
</html>